<template>
  <el-dialog :visible.sync="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
    :close-on-press-escape="false" width="50%" top="80px">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmitHandle()"
      :label-width="$i18n.locale === 'en-US' ? '100px' : '100px'">
      <el-row :gutter="30">
        <el-col :span="24">
          <el-form-item label="标题" prop="title">
            <el-input v-model="dataForm.title"></el-input>
          </el-form-item>
        </el-col>
        <!-- <el-col :span="12">
                <el-form-item label="类型" prop="type">
                    <el-radio-group v-model="dataForm.type" ds>
                        <el-radio :label="1">议事广场</el-radio>
                        <el-radio :label="9">社区互动</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-col> -->
        <el-col :span="24">
          <el-form-item label="内容" prop="content">
            <editor-vue style="margin-top:-30px" :content="dataForm.content" @EditorChange="getEditor"
              ref="infoIntroduceRef"></editor-vue>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import Cookies from 'js-cookie'
import debounce from "lodash/debounce";
import editorVue from '@/components/editor'
export default {
  props: ['type'],
  data() {
    return {
      visible: false,
      url: `${window.SITE_CONFIG['apiURL']
        }/oss/file/aliyunUpload?access_token=${Cookies.get('access_token')}`,
      dataForm: {
        id: "",
        title: "",
        content: '',
        pic: '',
        type: ''
      },
    };
  },
  components: {
    editorVue
  },
  created() {
    this.dataForm.type = this.type
  },
  computed: {
    dataRule() {
      return {
        title: [{
          required: true,
          message: this.$t("validate.required"),
          trigger: "blur",
        },],
        content: [{
          required: true,
          message: this.$t("validate.required"),
          trigger: "blur",
        }]

      };
    },
  },
  methods: {
    getEditor(val) {
      this.dataForm.content = val;
    },
    // 上传之前
    beforeUploadHandle(file) {
      if (
        file.type !== 'image/jpg' &&
        file.type !== 'image/jpeg' &&
        file.type !== 'image/png' &&
        file.type !== 'image/gif'
      ) {
        this.$message.error(this.$t('upload.tip', {
          format: 'jpg、png、gif'
        }))
        return false
      }

    },
    // 上传成功
    successHandle1(res, file, fileList) {
      if (res.code !== 0) {
        return this.$message.error(res.msg);
      }
      this.dataForm.pic = res.data.url;
    },
    init() {
      this.visible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.getInfo();
        } else {
          this.$nextTick(() => {
            this.$refs.infoIntroduceRef.init();
          });
        }
      });
    },
    //获取信息
    getInfo() {
      this.$http
        .get("/scenic/commforum/getOne", {
          params: {
            id: this.dataForm.id
          }
        })
        .then(({
          data: res
        }) => {
          if (res.code !== 0) {
            return this.$message.error(res.msg);
          }
          this.dataForm = {
            ...this.dataForm,
            ...res.data,
          };
          this.$nextTick(() => {
            this.$refs.infoIntroduceRef.init();
          });

        })
        .catch(() => { });
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs["dataForm"].validate((valid) => {
          if (!valid) {
            return false;
          }

          this.$http[!this.dataForm.id ? "post" : "put"](
            "/scenic/commforum",
            this.dataForm
          )
            .then(({
              data: res
            }) => {
              if (res.code !== 0) {
                return this.$message.error(res.msg);
              }
              this.$message({
                message: this.$t("prompt.success"),
                type: "success",
                duration: 500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            })
            .catch(() => { });
        });
      },
      1000, {
      leading: true,
      trailing: false
    }
    ),
  },
};
</script>

<style lang="scss" scoped>
.txt {
  line-height: 40px;
  height: auto;
  margin: 0;
  padding: 0;

  &.content {
    ::v-deep p {
      padding: 0;
      line-height: 24px;
      margin: 0 !important;
    }

    ::v-deep img {
      width: 100%;
    }

    img {
      width: 100%;
    }
  }
}
</style>
